<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入Three.js-->
    <script src="js/three.js"></script>
    <script type="text/javascript">
        //开启Three.js渲染器
        var renderer; //声明全局变量（对象）
        var projector, mouse = { x: 0, y: 0 }, INTERSECTED;
        function initThree() {
            width = document.getElementById('canvas3d').clientWidth; //获取画布「canvas3d」的宽
            height = document.getElementById('canvas3d').clientHeight; //获取画布「canvas3d」的高
            renderer = new THREE.WebGLRenderer({ antialias: true }); //生成渲染器对象（属性：抗锯齿效果为设置有效）
            renderer.setSize(width, height); //指定渲染器的高宽（和画布框大小一致）
            document.getElementById('canvas3d').appendChild(renderer.domElement); //追加 【canvas】 元素到 【canvas3d】 元素中。
            renderer.setClearColorHex(0xFFFFFF, 1.0); //设置canvas背景色(clearColor)
        }
        //设置相机
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 5000); //设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
            camera.position.x = 0; //设置相机的位置坐标
            camera.position.y = 50; //设置相机的位置坐标
            camera.position.z = 100; //设置相机的位置坐标
            camera.up.x = 0; //设置相机的上为「x」轴方向
            camera.up.y = 1; //设置相机的上为「y」轴方向
            camera.up.z = 0; //设置相机的上为「z」轴方向
            camera.lookAt({ x: 0, y: 0, z: 0 }); //设置视野的中心坐标
        }
        //设置场景
        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }

        //设置光源
        var light;
        function initLight() {
            light = new THREE.DirectionalLight(0xffffff, 1.0, 0); //设置平行光源
            light.position.set(200, 200, 200); //设置光源向量
            scene.add(light); // 追加光源到场景
        }
        //设置物体
        var cube;
        function initObject() {

            var cubeGeometry = new THREE.CubeGeometry(20, 20, 20);
            var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x000088 });
            cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.position.set(0, 0, 0);
            scene.add(cube);
            projector = new THREE.Projector();
            document.addEventListener('mousemove', onDocumentMouseMove, false);

        }
        function onDocumentMouseMove(event) {

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        }

        function update() {
            var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
            projector.unprojectVector(vector, camera);
            var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());


            var intersects = ray.intersectObjects(scene.children);


            if (intersects.length > 0) {

                if (intersects[0].object != INTERSECTED) {

                    if (INTERSECTED)
                        INTERSECTED.material.color.setHex(INTERSECTED.currentHex);

                    INTERSECTED = intersects[0].object;

                    INTERSECTED.currentHex = INTERSECTED.material.color.getHex();

                    INTERSECTED.material.color.setHex(0xffff00);
                }
            }
            else
            {
                if (INTERSECTED)
                    INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
                INTERSECTED = null;
            }

        }

        //执行
        animate();
        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene, camera);
        }
        function animate() {

            requestAnimationFrame(animate);
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
            update();
        }
    </script>
    <style type="text/css">
        div#canvas3d{
            border: none;
            cursor: move;
            width: 1400px;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
</head>

<body onload='threeStart();'>
<!--盛放canvas的容器-->
<div id="canvas3d"></div>
</body>
</html>